<template>
  <div class="selfService_Box">
    <div class="selfService_titleBox">
      <div class="titleBox1_l">
        <div class="Title_icon"></div>
        <span class="public_Text">自助机</span>
      </div>
      <div class="titleBox1_r" @click="addClose"></div>
    </div>

    <div class="selfService_contenBox">
      <div class="selfService_contenItem" v-for="(item,index) in shujvList" :key="index">
        <div class="contenItem_top">
          <div class="Top_Left">
            <span class="nameSpan">{{item?.NAME}}</span>
          </div>
        </div>
        <div class="contenItem_bom">
          <div class="BomItem">设备编号：{{item?.MAC}}</div>
          <!-- <div class="BomItem">今日服务次数：999次</div> -->
        </div>
        <div class="selfService_Rboxwuse">{{item?.STATUS}}</div>
        <!-- <div class="selfService_RboxZaixian">在线</div> -->
        <!-- <div class="selfService_RboxLixian">离线</div>
        <div class="selfService_RboxGuzhang">故障</div> -->
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref, watch } from "vue"
  import { postdatacenterdbapiapi } from "@/api/index.js"
  const emit = defineEmits(["clsoeselfService"])
  const addClose = () => {
    emit("clsoeselfService")
  }

  const props = defineProps({
    ziZhuObj: {
      type: Object,
      default: true
    }
  })

  const shujvList = ref([])

  const init = async (data) => {
    let TijiaoList = {
      "apiid": "self_service_status",
      "token": "self_service_status",
      "appid": "自助机业务列表",
      "apptype": "trans"
    }
    const res = await postdatacenterdbapiapi(TijiaoList)
    // console.log(res.data.data, "获取到了自助机的数据源");
    // console.log(JSON.parse(res.data.data), "获取到了自助机的数据源");
    shujvList.value = JSON.parse(res.data.data)
    console.log(shujvList.value);

  }

  watch(
    () => props.ziZhuObj,
    val => {
      console.log(val, '监听到了自助机的消息');
      init(val)
    },
    {
      deep: true,
      immediate: true
    }
  )
</script>
<style scoped lang="less">
  .selfService_Box {
    width: 100%;
    height: 100%;
    background: url("@/assets/accesscontrol/changbeijing.png") no-repeat center;
    background-size: 100% 100%;

    .selfService_titleBox {
      width: 808px;
      height: 60px;
      position: absolute;
      left: 50%;
      top: 20px;
      transform: translate(-50%, 0);
      display: flex;
      align-items: center;
      justify-content: space-between;

      .titleBox1_l {
        width: 600px;
        height: 60px;
        display: flex;
        align-items: center;

        .Title_icon {
          margin-left: 20px;
          width: 50px;
          height: 50px;
          background: url("@/assets/accesscontrol/zizhuji.png") no-repeat center;
          background-size: 100% 100%;
        }

        span {
          margin-left: 20px;
        }
      }

      .titleBox1_r {
        cursor: pointer;
        width: 80px;
        height: 80px;
        background: url("@/assets/PatientInformation/xhao.png") no-repeat center;
        background-size: 100% 100%;
      }
    }

    .selfService_contenBox {
      width: 808px;
      height: 1290px;
      position: absolute;
      left: 50%;
      top: 120px;
      transform: translate(-50%, 0);
      overflow-y: scroll;

      .selfService_contenItem {
        margin-bottom: 16px;
        width: 808px;
        height: 128px;
        border-radius: 16px;
        border: 2px solid #8da3bc;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding-left: 36px;
        position: relative;

        .contenItem_top {
          width: 95%;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .Top_Left {
            width: 70%;
            height: 50px;
            display: flex;
            align-items: center;

            .nameSpan {
              color: #000;
              text-align: center;
              font-family: "PingFang SC";
              font-size: 30px;
              font-style: normal;
              font-weight: 600;
              line-height: normal;
            }
          }
        }

        .contenItem_bom {
          width: 95%;
          height: 42px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 30px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.6);
        }

        .selfService_Rboxwuse {
          position: absolute;
          right: 40px;
          top: 7px;
          width: 124px;
          height: 50px;
          border-radius: 100px;
          /* border: 1px solid #00e7bd; */
          /* background: rgba(255, 255, 255, 0.5); */
          font-family: "PingFang SC";
          line-height: 50px;
          text-align: center;
          font-size: 30px;
          font-weight: 600;
          /* color: #00d889; */
        }

        .selfService_RboxZaixian {
          position: absolute;
          right: 40px;
          top: 7px;
          width: 124px;
          height: 50px;
          border-radius: 100px;
          border: 1px solid #00e7bd;
          background: rgba(255, 255, 255, 0.5);
          font-family: "PingFang SC";
          line-height: 50px;
          text-align: center;
          font-size: 30px;
          font-weight: 600;
          color: #00d889;
        }

        .selfService_RboxLixian {
          position: absolute;
          right: 40px;
          top: 7px;
          width: 124px;
          height: 50px;
          border-radius: 100px;
          border: 1px solid #9ea2a7;
          background: rgba(255, 255, 255, 0.5);
          font-family: "PingFang SC";
          line-height: 50px;
          text-align: center;
          font-size: 30px;
          font-weight: 600;
          color: #72787b;
        }

        .selfService_RboxGuzhang {
          position: absolute;
          right: 40px;
          top: 7px;
          width: 124px;
          height: 50px;
          border-radius: 100px;
          border: 1px solid #ff5e00;
          background: rgba(255, 255, 255, 0.5);
          font-family: "PingFang SC";
          line-height: 50px;
          text-align: center;
          font-size: 30px;
          font-weight: 600;
          color: #ff5900;
        }
      }
    }

    .hw_Box {
      width: 90%;
      height: 72px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .hw_lBox {
        display: flex;
        align-items: center;

        .hw_icon {
          width: 72px;
          height: 72px;
          background: url("@/assets/accessControl/yiliaoxiang.png") no-repeat center;
          background-size: 100% 100%;
        }

        .hw_icon1 {
          width: 72px;
          height: 72px;
          background: url("@/assets/accessControl/shenggao1.png") no-repeat center;
          background-size: 100% 100%;
        }

        .hw_icon2 {
          width: 72px;
          height: 72px;
          background: url("@/assets/accessControl/xueya.png") no-repeat center;
          background-size: 100% 100%;
        }

        .hwSpan {
          margin-left: 20px;
          font-size: 30px;
          color: #000;
        }
      }

      .hw_RboxTitle {
        color: #000;
        font-size: 30px;
        font-weight: 600;
      }

      .hw_RboxZaixian {
        width: 124px;
        height: 50px;
        border-radius: 100px;
        border: 1px solid #00e7bd;
        background: rgba(255, 255, 255, 0.5);
        font-family: "PingFang SC";
        line-height: 50px;
        text-align: center;
        font-size: 30px;
        font-weight: 600;
        color: #00d889;
      }

      .hw_RboxLixian {
        width: 124px;
        height: 50px;
        border-radius: 100px;
        border: 1px solid #9ea2a7;
        background: rgba(255, 255, 255, 0.5);
        font-family: "PingFang SC";
        line-height: 50px;
        text-align: center;
        font-size: 30px;
        font-weight: 600;
        color: #72787b;
      }

      .hw_RboxGuzhang {
        width: 124px;
        height: 50px;
        border-radius: 100px;
        border: 1px solid #ff5e00;
        background: rgba(255, 255, 255, 0.5);
        font-family: "PingFang SC";
        line-height: 50px;
        text-align: center;
        font-size: 30px;
        font-weight: 600;
        color: #ff5900;
      }
    }
  }
</style>